<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
  <table class="layui-hide" id="empInfo" lay-filter="empInfo"></table>
</div>

<script id="toolbar"  type="text/html">

    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">批量删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="add">批量保存</button>
     <div class="layui-inline">
     <div class="layui-input-inline" style="width:230px;height:38px;">
       <input type="text" name="likeEmpNo" id="likeEmpNo" required lay-verify="required" placeholder="请输入日期，格式：2020-02" class="layui-input">
     </div>
     
     <div class="layui-inline">
       <button class="layui-btn layui-btn-sm"  data-type="reload" id="search"><i class="layui-icon">&#xe615;</i>搜索</button>
     </div>  
    </div>
</script>

<script id="bar" type="text/html">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="editLayer">
    <!-- 编辑模态框 -->
    <div>
     <form action="/edit" class="layui-form" id="editForm">
     <div class="layui-form-item" style="display:none;">
       <label class="layui-form-label">id</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="id" id="id">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">月份</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="yearAndMonth" id="yearAndMonth">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">工号</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="empNo" id="empNo">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">姓名</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="name" id="name">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">基本工资</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="slary" id="slary">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">考勤扣款</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="attdDeduct" id="attdDeduct">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">纳税扣款</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="tax" id="tax">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">纳五险一金扣款</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="insuranceAndFund" id="insuranceAndFund">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">补贴金额</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="subsidy" id="subsidy">
       </div>   
     </div>
    <div class="layui-form-item">
       <label class="layui-form-label">应发工资</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="realWages" id="realWages">
       </div>   
     </div>
     </form> 
    </div>
</script>

<script type="text/html" id="addLayer">
    <!-- 添加模态框 -->
    <div>
     <form action="/edit" class="layui-form" id="editForm">
     <div class="layui-form-item" style="display:none;">
       <label class="layui-form-label">id</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="id" id="id">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">月份</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="yearAndMonth" id="yearAndMonth">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">工号</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="empNo" id="empNo">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">姓名</label>
       <div class="layui-input-inline">
          <input class="layui-input" type="text" name="userName" id="userName">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">基本工资</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="slary" id="slary">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">考勤扣款</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="attdDeduct" id="attdDeduct">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">纳税扣款</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="tax" id="tax">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">五险一金扣款</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="insuranceAndFund" id="insuranceAndFund">
       </div>   
     </div>
     <div class="layui-form-item">
       <label class="layui-form-label">补贴金额</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="subsidy" id="subsidy">
       </div>   
     </div>
    <div class="layui-form-item">
       <label class="layui-form-label">应发工资</label>
       <div class="layui-input-inline">
        <input class="layui-input" type="text" name="realWages" id="realWages">
       </div>   
     </div>
     </form> 
    </div>
</script>

<script src="layui/layui.js"></script> 
<script th:inline="none">
  layui.use('table',function(){
	  var table=layui.table;
	  var $=layui.jquery;
	  table.render({
		  elem:'#empInfo',
		  url:'/getWages',
		  method:'post',
		  toolbar:'#toolbar',
		  totalRow:true,
		//  width:'auto',
		  defaultToolbar:['filter','exports','print',{title:'提示',layEvent:'LAYTABLE_TIPS',icon:'layui-icon-tips'}],
		  title:'薪资信息表',
		  cols:[[
		    	 {type:'checkbox',fixed:'left'},
		    	// {field:'id',title:'ID',width:80,fixed:'left',unresize:true,sort:true,totalRowText:'合计'}
		    	 ,{field:'yearAndMonth',title:'月份',width:80,totalRowText:'合计'}
		    	 ,{field:'empNo',title:'工号',sort:true,width:100}
		    	 ,{field:'name', title:'姓名',sort: true,width:120}
		    	 ,{field:'slary', title:'基本工资',width:120}
		    	 ,{field:'attdDeduct', title:'考勤扣款',width:120}		    	
		    	 ,{field:'insuranceAndFund', title:'五险一金扣款',width:120}	
		    	 ,{field:'tax', title:'纳税扣款',width:120}
		    	 ,{field:'subsidy', title:'补贴金额',width:120}		    	
		    	 ,{field:'realWages', title:'实发金额',totalRow:true,width:120}		
		    		
		    	 ,{fixed: 'right', title:'操作', toolbar: '#bar',width:140}
		     ]],
		     id:'testreload',
		     page:true,

	  });
	  
	  //表格数据重载
	  var active={
			  reload:function(){
				  var likeEmpNo=$('#likeEmpNo');
				//  var likeDate=$('#likeDate');
				  table.reload('testreload',{
					  page:{
						  curr:1
					  },
					  where:{
						  //参数name的名称要与控制器中的一致
						  month:likeEmpNo.val(),
					  },
					  url:'/getWagesByMonth',
					  method:'post'
				  });
			  }
	  };
	  
	  //搜索按钮事件
	  
	  $("#search").on('click',function(){
		  var likeEmpNo=$('#likeEmpNo').val();
		  if(likeEmpNo!=null&&likeEmpNo!=""){
		  var type=$(this).data('type');
		  active[type]?active[type].call(this):'';
		  }else{
			  layer.alert("日期不能为空")
		  }
	  });
	  
	  
	  //头部工具栏
	  table.on('toolbar(empInfo)',function(obj){
		  var checkStatus=table.checkStatus(obj.config.id);
		  switch(obj.event){
		  case 'add':
			var data=checkStatus.data;
			//  layer.alert(JSON.stringify(data));
			if(data!=null||data!=""){
			 $.ajax({
				 url:'/addCheckedWages',
				 method:'post',
				 contentType:'application/json;charset=utf-8',
				 data:JSON.stringify(data),
				 success:function(msg){
					 if(msg){
						 layer.msg("保存成功！");
					 }else{layer.msg("保存失败！");}
				 },
				 error:function(msg){
					 layer.msg("系统错误，保存失败！");
				 }
			 });
			 }else{
				 layer.alert("请选择需要保存的内容。");
			 }
		    
		  break;
		  case 'getCheckLength':
			  var data=checkStatus.data;
			  layer.msg('选中了：'+data.length+'个');
		  break;
		  case 'del'://批量删除		       
			  //layer.msg(checkStatus.isAll?'全选':'未全选');
				if(data!=null||data!=""){
					 $.ajax({
						 url:'/delCheckedWages',
						 method:'post',
						 contentType:'application/json;charset=utf-8',
						 data:JSON.stringify(data),
						 success:function(msg){
							 if(msg){
								 layer.msg("删除成功！");
							 }else{layer.msg("删除失败！");}
						 },
						 error:function(msg){
							 layer.msg("系统错误，删除失败！");
						 }
					 });
					 }else{
						 layer.alert("请选择需要删除的内容。");
					 }
		  break;
		  case 'LAYTABLE_TIPS':
			  layer.alert('这是工具栏右侧自定义的一个图标按钮');
		  break;
		  };
	  });
	  
	  //行工具栏
	  table.on('tool(empInfo)',function(obj){
		  var data=obj.data;
		  if(obj.event==='del'){
			  layer.confirm('真的删除吗',function(index){
				// obj.del();
				 layer.close(index);
				
				 obj.del();	 
				 layer.msg("删除成功");
				  //向服务器端发送删除指令
				 // $.ajax({
				//	  url:'/delWage?id='+data.id,
				//	  method:'post',
				//	  async:false,
					  
			//		  success:function(data){
			//			  if(data){
			//			  layer.msg("删除成功");
			//			  obj.del();
			//			  } 
						//  }else{layer.msg("删除失败");}
			//		  },
				//	  error:function(data){
				//		  if(data){
				//			  layer.msg("删除失败");
				//		  }
				//	  }
				//  });
			  });
		  }else if(obj.event==='edit'){
			 layui.use('form',function(){
				 var form=layui.form;
				 var $=layui.jquery;
			 var editIndex=layer.open({
				  formType:1,
				  title:'修改工资信息',
				  btn:['确认','取消'],
				  yes:function(editIndex,layero){
					  
					//获取表单的值，必须再次出获取，若在给弹窗赋值后再获取，则获取到的仍是原始数据，相当于加载了一个空的表单，然后弹窗赋值，然后获取表单的值
					 var id=$("#id").val();
					 var yearAndMonth=$("#yearAndMonth").val();
				     var empNo=$("#empNo").val();
				     var name=$("#name").val();
				     var attdDeduct=$("#attdDeduct").val();
				     var tax=$("#tax").val();
				     var insuranceAndFund=$("#insuranceFund").val();
				     var realWages=$("#realWages").val();
				     var slary=$("#slary").val();
				     var subsidy=$("#subsidy").val();
					  //向后台发送修改请求
				//	  $.ajax({
				//		  url:'/editWages',
				//		  contentType:"application/json;charset=utf-8",
				//		  method:'post',
				//		  data:JSON.stringify({id:id,empNo:empNo,userName:userName,type:type,starTime:starTime,endTime:endTime}),
				//		  success:function(data){
				//			  layer.msg("修改成功");
				//			 window.setTimeout(function(){window.location.reload();},500)
							 
				//		  },
				//		  error:function(data){layer.msg("修改失败");}
				//	  });
					  obj.update({
						  yearAndMonth:yearAndMonth,
						  empNo:empNo,
						  name:name,
						  attdDeduct:attdDeduct,
						  tax:tax,
						  insuranceAndFund:insuranceAndFund,
						  slary:slary,
						  realWages:realWages,
						  subsidy:subsidy
					  });
				  },
				  btn2:function(editIndex,layero){
					  layer.close(editIndex);
				  },
				//  end:function(){parent.reload();},
				  area:['450px','450px'],
				  content:$('#editLayer').html(),
				  success:function(layero,index){ 
					  //给个控件赋值
						 $("[name='id']").val(data.id);
					     $("[name='yearAndMonth']").val(data.yearAndMonth);
						 $("[name='empNo']").val(data.empNo);
						 $("[name='name']").val(data.name);
						 $("[name='attdDeduct']").val(data.attdDeduct);
						 $("[name='tax']").val(data.tax);
						 $("[name='insuranceAndFund']").val(data.insuranceAndFund);
						 $("[name='slary']").val(data.slary);
						 $("[name='realWages']").val(data.realWages);
						 $("[name='subsidy']").val(data.subsidy);
						 layui.use('laydate',function(){
							   var laydate=layui.laydate;
							   laydate.render({
								   elem:'#yearAndMonth',
								   type:'month',
							   });
							
						   });
						 form.render()},
				  });						 
			 });
		  }
	  });

  });
</script>
</body>
</html>